<template>
  <view class="mine">
    <!--<AtGrid :data="data" :columnNum="columnNum"/>-->
    <view class="information">
      <view class="head">
        <image class="head__img" v-if="getUserInfo && getUserInfo.student_avatar" :src="getUserInfo && getUserInfo.student_avatar" />
        <image class="head__img" v-else :src="headDefault" />
      </view>
      <view class="personal">
        <view v-if="getUserInfo">
          <view class="name ove">{{ getUserInfo.student_name }}</view>
          <view class="grade" v-if="getUserInfo.grade && getUserInfo.grade.title">{{ getUserInfo.grade.title }}</view>
        </view>
        <view v-else class="un_login">
          <view class="name">立即登录</view>
          <view class="slogan">登录后可体验更多功能</view>
        </view>
      </view>
    </view>
    <view class="nav-info">
      <!-- 优惠券, 订单 -->
      <view class="nav-list">
        <view
          v-for="(item, idx) in navInfo.HEAD_DNV"
          :key="idx"
          class="nav-list-item">
          <image class="nav-list-item__icon" :src="item.icon_url" />
          <view class="info">
            <view
              class="name"
              :class="{ 'order-info': item.type === 'order' && noPayOrder }"
              :data-count="noPayOrder">
              {{ item.name }}
            </view>
            <view class="hint">{{ item.desc }}</view>
          </view>
        </view>
      </view>
      <view class="nav-tab">
        <AtGrid :data="navInfo.TAB_NAV" :columnNum="columnNum" />
      </view>
      <swiper
        class='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        current="current"
        :duration="duration"
        :interval="interval"
        :circular="isCircular"
        :autoplay="isAutoplay"
        :indicatorDots="hasIndicatorDots">
        <swiper-item v-for="(item, idx) in imgUrls" :key="idx">
          <image :src="item" class="slide-image" />
        </swiper-item>
      </swiper>
      <view class="cut-nav">
        <view
          class="cut-nav__item"
          v-for="(item, idx) in navInfo.CUT_NAV"
          :key="idx"
          @tap="handleToPage(item)">
          <view class="title">{{ item.name }}</view>
          <image class="icon" :src="item.image" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { AtGrid } from "taro-ui-vue";

/* 引入接口 */
import { getPersonalInfo } from "../../libs/axios/modules/personal-center";

/* 引入本地图片 */
import orderIcon from '../../images/personal-center/order_icon.png'
import couponIcon from '../../images/personal-center/coupon_icon.png'
import groupIcon from '../../images/personal-center/group_icon.png'
import integralIcon from '../../images/personal-center/integral_icon.png'
import flowerIcon from '../../images/personal-center/flower_icon.png'
import teacherIcon from '../../images/personal-center/teacher_icon.png'
import headToPage from '../../images/personal-center/head_to_page.png'
import defaultAvatar from '../../images/personal-center/default-avatar.png'

/* 导航信息 */
const NAV_INFO = {
  HEAD_DNV: [
    {
      name: "订单中心",
      icon_url: orderIcon,
      to: "/order",
      type: "order",
      info: true,
      desc: "查物流，改地址"
    },
    {
      name: "优惠券",
      icon_url: couponIcon,
      to: "/coupon",
      type: "coupon",
      desc: "大额好券都在这里"
    }
  ],
  TAB_NAV: [
    {
      value: "拼团",
      image: groupIcon,
      to: "/group-info",
      type: "group",
      info: true
    },
    {
      value: "积分",
      image: integralIcon,
      to: "/integral?type=1",
      type: "integral"
    },
    {
      value: "花币",
      image: flowerIcon,
      to: "/integral?type=2",
      type: "flower"
    },
    {
      value: "关注老师",
      image: teacherIcon,
      to: "/favorite",
      type: "teacher"
    }
  ],
  CUT_NAV: [
    {
      name: "咨询中心",
      to: "/information-center",
      type: "consult",
      hint: true,
      image: headToPage
    },
    {
      name: "兑换码",
      to: "/course-change",
      type: "code",
      image: headToPage
    },
    {
      name: "设置",
      to: "/pages/set/index",
      type: "set",
      image: headToPage
    }
  ]
};

export default {
  name: "Index",
  components: {
    AtGrid
  },
  data() {
    return {
      headDefault: defaultAvatar,
      columnNum: 4,
      getUserInfo: null,
      navInfo: NAV_INFO,
      current: 1,
      duration: 500,
      interval: 5000,
      isCircular: false,
      isAutoplay: false,
      hasIndicatorDots: true,
      imgUrls: [
        'https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180',
        'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180',
        'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180',
      ]
    };
  },
  computed: {
    /* 订单待支付 */
    noPayOrder() {
      return this.getUserInfo && +this.getUserInfo.noPayOrder;
    }
  },
  onShow() {
    this.getInfoData()
  },
  methods: {
    /* 获取信息 */
    getInfoData () {
      getPersonalInfo()
        .then(({ data }) => {
          this.getUserInfo = data
        })
        .catch((e) => {
          console.log(e)
        })
    },
    /* 跳转 */
    handleToPage (val) {
      this.$taro.navigateTo({
        url: val.to,
        fail: (e) => {
          console.log(e)
        }
      })
    }
  }
};
</script>

<style lang="scss">
.mine {
  width: 100%;
  background-size: 100%;
  box-sizing: border-box;
  background: url("../../images/personal-center/head_bg.png") no-repeat #f5f5f5;
  background-size: contain;
  .information {
    display: flex;
    align-items: center;
    position: relative;
    padding: 15px 11px;
    box-shadow: unset;
    background: none;
    .personal {
      padding-left: 32px;
      flex: 1;
      > view {
        width: 90%;
      }
      .name {
        font-size: 44px;
        font-weight: bold;
        color: #303030;
        max-width: 460px;
      }
      .slogan {
        font-size: 28px;
        line-height: 40px;
        color: #999999;
      }
    }
    .head {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      overflow: hidden;
      &__img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .nav-info {
    padding: 15px 11px;
    >view {
      width: 100%;
      margin-top: 32px;
      border-radius: 16px;
      box-shadow:0px 2px 20px rgba(192,196,204,0.12);
      background: #ffffff;
    }
    .nav-list {
      width: 100%;
      height: 172px;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      &:after {
        content: "";
        height: 72px;
        width: 2px;
        background: #f3f3f3;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      &-item {
        width: 50%;
        display: flex;
        align-items: center;
        padding-left: 24px;
        &__icon {
          width: 104px;
          height: 104px;
        }
        .info {
          padding-left: 4px;
          .name {
            font-size: 36px;
            font-weight: bold;
            line-height: 50px;
            color: #303030;
            display: flex;
            align-items: center;
            &.order-info::after {
              content: attr(data-count);
              width: 32px;
              height: 32px;
              border-radius: 100%;
              background:#f64500;
              color: #ffffff;
              text-align: center;
              line-height: 30px;
              margin-left: 8px;
              font-size: 24px;
            }
          }
          .hint {
            margin-top: 4px;
            font-size: 24px;
            color: #999999;
            line-height: 34px;
          }
        }
      }
    }
    .nav-tab {
      background: #ffffff;
      .at-grid__flex-item::after {
        border-width: 0;
      }
    }
    .test-h {
      width: 100%;
      margin-top: 32px;
      border-radius: 16px;
      box-shadow:0px 2px 20px rgba(192,196,204,0.12);
      background: #ffffff;
      overflow: hidden;
      .slide-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .cut-nav {
      width: 100%;
      background: #ffffff;
      padding: 16px 0;
      &__item {
        display: flex;
        justify-content: space-between;
        padding: 24px 32px;
        align-items: center;
        .title {
          display: flex;
          font-size: 32px;
          color: #303030;
          align-items: center;
        }
        .icon {
          width: 48px;
          height: 48px;
        }
      }
    }
  }
}
</style>
